<template>
	<view>
		<view class="flex justify-between align-center padding">
			<view class="flex justify-between align-center">
				<text class="cuIcon-location"></text>
				<view @tap="chooseAddr" style="width: 100%;margin-left: 15px;" v-if="addr==null">请选择地址</view>
				<view @tap="chooseAddr" style="width: 100%;margin-left: 15px;" v-else>
					<view class="padding-right">{{addr.username}}<text class="text-gray padding-left text-sm">{{addr.phone}}</text></view>
					<view class="margin-top-xs text-gray">{{addr.detail}}</view>
				</view>
			</view>
			<view class="cuIcon-right"></view>
		</view>

		<view class="margin-bottom" style="width: 100%;height: 5px;background-color: grey;opacity: 0.1;"></view>

		<view>
			<view class="padding solid-bottom">已选</view>
			<view class="padding solid-bottom flex align-center" style="width: 100%;" v-for="(item,index) in skuArr" :key="index">
				<view>
					<image style="width: 50px !important;height: 50px;object-fit: cover;" mode="aspectFill" :src="item.img"></image>
				</view>
				<view class="padding-left">
					<view style="display: block;">{{item.name}}</view>
					<view class="text-sm text-gray padding-top-xs padding-bottom-xs">{{item.attrName}}</view>
					<view class="flex justify-between text-gray text-sm">
						<text>数量 ：{{item.num}}</text>
						<text style="color: #C5A16F;">￥{{item.price}}</text>
					</view>
				</view>
			</view>
		</view>

		<view style="width: 100%;height: 5px;background-color: grey;opacity: 0.1;"></view>

		<view class="text-sm">
			<view class="solid-bottom flex justify-between padding">
				<text>商品金额</text>
				<text style="color: #C5A16F;">￥{{totalPrice}}</text>
			</view>
			<view class="solid-bottom flex justify-between padding">
				<text>优惠金额</text>
				<text style="color: #C5A16F;"><text v-if="coupon!=null" style="font-size: 10px;color: red;border: 1px solid red;padding: 2px;border-radius: 4px;margin-right: 10px;">优惠券</text> -￥{{totalDiscountPrice}}</text>
			</view>
			<view class="solid-bottom flex justify-between padding">
				<text>运费</text>
				<text style="color: #C5A16F;">免运费</text>
			</view>
			<view class="solid-bottom padding flex">
				<text style="width: 80px;">备注</text>
				<input @input="inputRemark" placeholder="填写备注" class="text-sm"></input>
			</view>
		</view>
		<view style="width: 100%;height: 5px;background-color: grey;opacity: 0.1;"></view>

		<!--底部点位-->
		<view style="height: 50px;"></view>
		<view class="flex justify-between align-center bg-white solid-top" style="height: 40px;position: fixed;left: 0;bottom: 0;width: 100%;">
			<view class="padding-lr">
				<view class="text-bold">合计：<text style="color: #C5A16F;">￥{{totalPrice - totalDiscountPrice}}</text></view>
				<view class="text-sm text-gray">共{{totalNum}}件商品</view>
			</view>
			<view @tap="createOrder" style="background-color: #C5A16F;line-height: 40px;color: #FFFFFF;padding: 0 20px;">提交订单</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addr: null,
				skuArr: [],
				skillId:'',//秒杀活动ID
				totalPrice: 0,
				totalNum: 0,
				totalDiscountPrice:0,//秒杀有优惠价
				remark: '',
				
				coupon: null //优惠券
			}
		},
		onLoad() {
			var that = this;
			uni.getStorage({
				key: 'skuArr',
				success(res) {
					console.log(res)
					that.skuArr = res.data;
					var totalPrice = 0;
					var totalNum = 0;
					var totalDiscountPrice = 0;
					var totalPriceSale = 0;
					for (var k = 0; k < res.data.length; k++) {
						totalPrice += res.data[k].price * res.data[k].num;
						totalNum += res.data[k].num;
						totalDiscountPrice += (res.data[k].discountPrice?res.data[k].discountPrice:0);
						
						that.skillId = res.data[k].skillId?res.data[k].skillId:'';
					}
					
					that.totalNum = parseFloat(totalNum);
					that.totalPrice =  parseFloat(totalPrice).toFixed(2);
					that.totalDiscountPrice =  parseFloat(totalDiscountPrice).toFixed(2);
					
					if(!that.skillId) {//非秒杀，秒杀不能使用优惠券
						that.$get('mall/coupon/mycoupons',{type:'normal',max:that.totalPrice}).then((res) => {
							if(res.data && res.data.length>0) {
								//获取第一个符合条件的优惠券，直接减
								that.coupon = res.data[0];
								that.totalDiscountPrice = res.data[0].price;
							}
						});
					}
				}
			})
		},
		onUnload() {
			uni.removeStorage({
				key:'skuArr'
			})
		},
		methods: {
			inputRemark(e) {
				this.remark = e.detail.value;
			},
			chooseAddr() {
				var that = this;
				uni.chooseAddress({
					success(res) {
						// console.log(res)
						if (res.errMsg === 'chooseAddress:ok') {
							var addr = res.provinceName + ' ' + res.cityName + ' ' + res.detailInfo;
							var username = res.userName;
							var phone = res.telNumber;

							var addr = {
								detail: addr,
								username: username,
								phone: phone,
								postcode: res.postalCode
							}
							that.addr = addr;
						}
					}
				})
			},
			createOrder() {
				var that = this;
				
				this.$checkAuth(function() {
					if (that.addr == null) {
						uni.showToast({
							icon: 'none',
							title: '请选择收货地址'
						})
						return;
					}
					uni.showModal({
						content: '确认提交订单？',
						success(res) {
							if (res.confirm) {
								console.log('begin create order ...')
					
								var arrSkus = [];
								for (var index = 0; index < that.skuArr.length; index++) {
									var item = {
										skuId: that.skuArr[index].refSkuId,
										spuId: that.skuArr[index].refSpuId,
										name: that.skuArr[index].name,
										num: that.skuArr[index].num,
										attrName: that.skuArr[index].attrName
									}
									arrSkus.push(item);
								}
								// console.log(arrSkus)
								that.$get('mall/order/create', {
									skus: JSON.stringify(arrSkus),
									addrs: JSON.stringify(that.addr),
									remark: that.remark,
									skillId:that.skillId ,//秒杀活动ID
									couponId:that.coupon!=null?that.coupon.couponId:null
								}, 'post', true).then((apires) => {
									if (apires.data) {
										uni.redirectTo({
											url: '/pages/order/casher?orderno=' + apires.data + '&price=' + that.totalPrice + '&num=' + that.totalNum
										})
									}
								})
							}
						}
					})
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #ffffff;
	}
</style>
